<template>
	<view class="detail-warp">
		<view class="order-finish" v-if="orderDetailInfo.status == 2">
			<view class="success-icon">
				<image src="@/static/images/success-icon.png" mode=""></image>
			</view>
			<view>已使用</view>
		</view>
		
		<view class="order-status" v-else>
			<view class="top">
				<view class="icon"></view>
				<view class="text" v-if="orderDetailInfo.status == 1">待使用</view>
				<view class="text" v-else>待付款，剩余25：23</view>
			</view>
			<view class="bottom">
				使用时间：{{orderDetailInfo.reserve_date}}
			</view>
		</view>
		
		
		<view class="qrcode-warp" v-if="orderDetailInfo.status == 1">
			<image :src="orderDetailInfo.qrcode_url" mode=""></image>
		</view>
		
		<view class="order-info">
			<view class="info-img">
				<image :src="orderDetailInfo.images" mode=""></image>
			</view>
			<itemInfoCompVue style="height: 100%;" :item-info="orderDetailInfo"></itemInfoCompVue>
		</view>
		
		<locationInfo :address="addressInfo"></locationInfo>
		
		<view class="more-info-warp">
			<text class="more-txt">更多信息</text>
			<view class="item-info">
				<view class="label">订单编号</view>
				<view class="value">{{ orderDetailInfo.order_no}}</view>
			</view>
			<view class="item-info">
				<view class="label">支付金额</view>
				<view class="value">{{orderDetailInfo.price ||0}}</view>
			</view>
			<view class="item-info">
				<view class="label">下单时间</view>
				<view class="value">{{orderDetailInfo.add_time}}</view>
			</view>
			<!-- <view class="item-info">
				<view class="label">付款时间</view>
				<view class="value">{{orderDetailInfo.add_time}}</view>
			</view>
			<view class="item-info">
				<view class="label">使用时间</view>
				<view class="value">{{orderDetailInfo.add_time}}</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import itemInfoCompVue from '@/pages/index/comp/itemInfoComp.vue'
	import locationInfo from '../comp/locationInfo.vue'
	import { storeListApi } from '@/api/store.js';
	export default{
		components:{
			itemInfoCompVue,
			locationInfo
		},
		data(){
			return {
				orderDetailInfo:{},
				addressInfo:''
			}
		},
		onLoad(options) {
			this.getOrderDetailInfo(options.infos)
			this.getList()
		},
		methods:{
			getOrderDetailInfo(infos){
				const str = decodeURIComponent(infos)
				this.orderDetailInfo = JSON.parse(str)
				console.log('orderDetailInfo====>',this.orderDetailInfo);
			},
			getList() {
				let longitude = uni.getStorageSync("user_longitude") || ''; //经度
				let latitude = uni.getStorageSync("user_latitude") || ''; //纬度
				let data = {
					latitude: latitude, //纬度
					longitude: longitude, //经度
					page: 1,
					limit: 10
				}
				storeListApi(data).then(res => {
					console.log('res============>',res);
					let list = res.data.list.list || [];
					const { address,detailed_address,name } = list[0]|| {}
					const arr = address.split(',')
					this.addressInfo = arr[0] + name + detailed_address
				}).catch(err => {})
			},
		}
	}
</script>

<style scoped lang="scss">
		page{
			background-color: #fff !important;
		}
		image{
			width: 100%;
			height: 100%;
			vertical-align: top;
		}
		.detail-warp{
			width: 100%;
			height: 100%;
			padding: 22rpx;
			box-sizing: border-box;
			.order-status{
				width: 100%;
				height: 170rpx;
				background: #2456FF;
				padding: 26rpx 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				box-sizing: border-box;
				color: #FFFFFF;
				.top{
					font-size: 36rpx;
					display: flex;
					align-items: center;
					.icon{
						margin-right: 20rpx;
						width: 40rpx;
						height: 40rpx;
						background-color: #fff;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 50%;
					}
					.icon::after{
						position: relative;
						content: '<';
						transform: scale(45deg);
						color:#2456FF ;
					}
				}
				.bottom{
					font-weight: 500;
					font-size: 28rpx;
				}
			}
			
			.order-finish{
				width: 100%;
				height: 100rpx;
				background: #F7F7F7;
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 36rpx;
				color: #000000;
				.success-icon{
					margin-right: 22rpx;
				}
			}
			.order-info{
				width: 100%;
				height: 154rpx;
				display: flex;
				align-items: center;
				margin: 40rpx auto;
				.info-img{
					width: 152rpx;
					height: 152rpx;
					border-radius: 16rpx;
					// border: 1px solid #333;
					margin-right: 20rpx;
					overflow: hidden;
				}
			}
			
			.qrcode-warp{
				width: 248rpx;
				height: 248rpx;
				border: 1rpx solid #d2d2d2;
				margin: 20rpx auto;
			}
			.more-info-warp{
				width: 100%;
				height: 600rpx;
				// background: red;
				.more-txt{
					font-size: 28rpx;
					color: #9B9C9B;
				}
				.item-info{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					margin-top: 30rpx;
					margin-bottom: 40rpx;
					.label{
						color: #000000;
					}
					.value{
						color: #7D7D7D;
					}
				}
			}
		}
</style>